import React from 'react'
import { Card } from 'antd';
import './index.scss'
export default function drag() {
    let dragList = [
        'http://pic.netbian.com/uploads/allimg/221206/232707-167034042795b0.jpg',
        'http://pic.netbian.com/uploads/allimg/221205/155137-16702266973333.jpg',
        'http://pic.netbian.com/uploads/allimg/221009/225723-166532744398b2.jpg',
        'http://pic.netbian.com/uploads/allimg/221201/002743-1669825663adc4.jpg',
        'http://pic.netbian.com/uploads/allimg/221015/002453-16657646939396.jpg',
    ]
    let dragging = false
    let cloneEl = null // 克隆元素
    let initial = {} // 初始化数据记录
    let dragWarp = {}
    // 计算两点之间距离
    const distance = ({ clientX, clientY }) => {
        const { clientX: x, clientY: y } = initial // 获取初始的坐标
        const b = clientX - x;
        const a = clientY - y;
        return Math.sqrt(Math.pow(b, 2) + Math.pow(a, 2))
    }
    const moseDown = (e) => {

        //鼠标按下
        if (dragging) return
        document.onmousemove = null;
        document.onmouseup = null;
        //父元素属性
        dragWarp = {
            left: parseInt(document.querySelector('#drag-warp').getBoundingClientRect().left),
            top: parseInt(document.querySelector('#drag-warp').getBoundingClientRect().top),
            minLeft: null,
            maxLeft: null,
            minTop: null,
            maxTop: null,
            ifOk: false,
        }
        //元素初始属性
        initial = {
            width: parseInt(window.getComputedStyle(e.target).width),
            height: parseInt(window.getComputedStyle(e.target).height),
            clientX: parseInt(e.nativeEvent.clientX),
            clientY: parseInt(e.nativeEvent.clientY),
            offsetX: parseInt(e.nativeEvent.offsetX),
            offsetY: parseInt(e.nativeEvent.offsetY),
            left: null,
            top: null,
        }
        //设置属性
        cloneEl = e.target.cloneNode(true)
        cloneEl.classList.add('flutter') // 使其浮动
        cloneEl.style.borderRadius = '5px'
        cloneEl.style.width = initial.width + 'px'
        cloneEl.style.height = initial.height + 'px'
        initial.left = initial.clientX - initial.offsetX - dragWarp.left
        initial.top = initial.clientY - initial.offsetY - dragWarp.top
        cloneEl.style.left = initial.left + 'px'
        cloneEl.style.top = initial.top + 'px'
        const borderEl = document.querySelector('#drag-warp .ant-card-body .content-warp')
        const leftEl = document.querySelector('#drag-warp .left')
        const rightEl = document.querySelector('#drag-warp .right .ant-card-body')
        const topEL = document.querySelector('#drag-warp .right .ant-card-head')
        e.target.parentElement.appendChild(cloneEl) // 加入到列表中
        e.target.style.opacity = 0.2
        dragging = true // 标记拖动开始
        //鼠标按住移动
        document.onmousemove = (e_move) => {
            if (dragging && cloneEl) {
                cloneEl.style.left = e_move.clientX - initial.offsetX - dragWarp.left + 'px'
                cloneEl.style.top = e_move.clientY - initial.offsetY - dragWarp.top + 'px'
                const d = distance(e_move) // 计算距离
                let scale = 1
                if (d && d > 0) scale = `scale(${(initial.width * 3 + d) / (initial.width * 3)})`
                cloneEl.style.transform = scale
                //计算拖动边距
                dragWarp.minLeft = leftEl.offsetWidth + parseInt(window.getComputedStyle(leftEl).marginRight) + parseInt(window.getComputedStyle(rightEl).paddingLeft)
                dragWarp.maxLeft = leftEl.offsetWidth + parseInt(window.getComputedStyle(leftEl).marginRight) + parseInt(window.getComputedStyle(rightEl).paddingLeft) + parseInt(window.getComputedStyle(rightEl).width)
                dragWarp.minTop = parseInt(window.getComputedStyle(topEL).height) + parseInt(window.getComputedStyle(rightEl).paddingTop)
                dragWarp.maxTop = parseInt(window.getComputedStyle(topEL).height) + parseInt(window.getComputedStyle(rightEl).paddingTop) + parseInt(window.getComputedStyle(rightEl).height)
                if (parseInt(cloneEl.style.left) > dragWarp.minLeft && parseInt(cloneEl.style.left) < dragWarp.maxLeft && parseInt(cloneEl.style.top) > dragWarp.minTop && parseInt(cloneEl.style.top) < dragWarp.maxTop) {
                    dragWarp.ifOk = true
                    borderEl.style.borderColor = '#1890ff'
                }
                else {
                    dragWarp.ifOk = false
                    borderEl.style.borderColor = 'gray'
                }
            }
        }
        //鼠标松开
        document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
            cloneEl.style.transform = 'none'
            cloneEl.style.transition = 'all .3s'
            borderEl.style.borderColor = 'gray'

            if (dragWarp.ifOk) {
                dragging = false
                cloneEl.style.position = 'static'
                cloneEl.style.marginRight = '10px'
                cloneEl.style.marginLeft = '10px'
                cloneEl.style.marginBottom = '10px'
                cloneEl.style.marginTop = '10px'
                document.querySelector('.content-warp').appendChild(cloneEl)
                e.target.style.opacity = 1
                return
            }
            else {
                cloneEl.style.left = initial.left + 'px'
                cloneEl.style.top = initial.top + 'px'
                setTimeout(() => {
                    cloneEl.remove()
                    e.target.style.opacity = 1
                    dragging = false
                }, 300)
            }

        }
    }
    return (
        <div className='drag-warp' id='drag-warp'>
            <Card className='left' title="素材" bordered={false} >
                <div className='img-warp'>
                    {dragList.map((item, index) => {
                        return <img alt='' src={item} onMouseDown={(e) => { moseDown(e) }} style={{ objectFit: "cover", width: '48%' }} key={index} />
                    })}
                </div>
            </Card>
            <Card className='right' title="视图" bordered={false} >
                <div className='content-warp' >
                    {/* <div className='item'>1</div>
                    <div className='item'>2</div>
                    <div className='item'>3</div>
                    <div className='item'>4</div> */}
                </div>
            </Card>
        </div>
    )
}
